<template>
  <div class="checkVideo">
    <el-dialog
      title="查看视频"
      :visible.sync="centerDialogVisible"
      width="60%"
      @close="onClose"
    >
      <video
        ref="video"
        :src="videoUrl"
        controls
        autoplay
        style="width:100%;height:450px;object-fit:contain"
      ></video>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="centerDialogVisible = false"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component({})
export default class App extends Vue {
  videoSrc = ''
  centerDialogVisible = false
  open(src: any) {
    this.centerDialogVisible = true
    this.videoSrc = src
  }

  get videoUrl() {
    return `${process.env.VUE_APP_BASE_API}/compress/ipfs/get?ipfshash=${this.videoSrc}`
  }

  onClose() {
    (this.$refs.video as any).pause()
  }
}
</script>

<style scoped lang="scss"></style>
